<template>  
  <div id="map" ref="mapElement"></div>  
</template> 
<script setup>  
import Map from 'ol/Map';  
import View from 'ol/View';  
import TileLayer from 'ol/layer/Tile';  
import XYZ from 'ol/source/XYZ';  
import VectorLayer from 'ol/layer/Vector';  
import VectorSource from 'ol/source/Vector';  
import Feature from 'ol/Feature';  
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj'; 
import { onMounted, ref } from 'vue';

const mapElement=ref(null)
const initMap=()=>{    
    // 创建高德地图的 XYZ 瓦片源  
    const amapSource = new XYZ({  
      url: `https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}`,
      // 高德地图的瓦片服务可能有不同的 URL 格式和参数，这里是一个示例  
    });  
    // 创建 OpenLayers 图层，使用上面创建的瓦片源  
    const amapLayer = new TileLayer({  
      source: amapSource,  
    });  
    // 创建 OpenLayers 地图实例  
    const map = new Map({  
      target: mapElement.value,  
      layers: [amapLayer],  
      view: new View({  
        center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标（例如：北京）  
        zoom: 8, // 设置初始缩放级别  
        // projection:"EPSG:4326"
      }), 
    });  
  }
onMounted(()=>{
  initMap()
})

</script>
<style scoped>  
#map {
  width: 100vw;
  height: 100vh;
}
* {
  padding: 0;
  margin: 0;
}
</style>